<template>
  <div id="team-create-page">
    <h2>我创建的队伍</h2>
    <div v-if="isLoading" class="loading">
      <van-loading type="spinner" />
    </div>
    <div v-else>
      <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch"/>
      <my-team-card-list :userTeams="teamList"/>
      <van-empty v-show="!teamList || teamList.length < 1" description="您还未创建队伍" />
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {showToast} from "vant";
import myAxios from "../../plugins/myAxios";
import MyTeamCardList from "../../components/MyTeamCardList.vue";

const router = useRouter();
const searchText = ref('');
const teamList = ref([]);
const isLoading = ref(true);

const listTeam = async (val = '') => {
  isLoading.value = true;
  try {
    const res = await myAxios.get('/team/list/my/create', {
      params: {
        searchText: val,
        pageNum: 1,
      }
    });
    if (res?.code === 0) {
      teamList.value = res.data;
    } else {
      showToast("加载队伍失败，请刷新重试！" + (res.description ? `，${res.description}` : ''));
    }
  } catch (error) {
    console.error('加载我创建的队伍失败', error);
    showToast('加载队伍失败，请刷新重试！');
  } finally {
    isLoading.value = false;
  }
}

onMounted(() => {
  listTeam();
})

// 搜索队伍
const onSearch = (val) => {
  listTeam(val);
}
</script>

<style scoped>
#team-create-page {
  padding: 16px;
}
h2 {
  text-align: center;
  margin-bottom: 24px;
  color: #333;
}
.loading {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
</style>